/*
 * @Description: 打赏支持
 * @Autor: HuiSir<273250950@qq.com>
 * @Date: 2024-02-08 12:56:45
 * @LastEditTime: 2024-05-27 11:59:33
 */
import { ref, computed } from "../utils/vue.esm.js";
import { getSupportMeta } from "./api/articleMeta.js";
const template = /*html*/ `
<!-- 支持 -->
<div class="support-author">
  <p>{{supportDesc}}</p>
  <a class="support-button" title="赞助本站" style="cursor: pointer;" @click="showBox = true"
    >¥ 打赏支持</a
  >
  <div v-if="showBox" class="sponsor-up">
    <h5>选择您喜欢的打赏方式：</h5>
    <label :class="{ok:supportType===1}"  @click="supportType = 1"><c class="iconfont">○</c>微信红包</label>
    <label :class="{ok:supportType===2}" @click="supportType = 2"><c class="iconfont">○</c>支付宝</label>
    <dt v-show="supportType===1" class="qr-weixin">
      <img :src="weixinQrcode"/><span>打赏</span>
    </dt>
    <dt v-show="supportType===2" class="qr-alipay">
      <img :src="alipayQrcode"/><span>打赏</span>
    </dt>
    <span class="mobilesm" style="text-align:center;display:block;display:none"
      >手机访客请先将二维码保存后再扫描</span
    >
    <a @click="reward" style="text-align:center;display:block"
      >已打赏？点此通知作者</a
    >
    <i class="close" @click="showBox = false">×</i>
  </div>
</div>
`;
export default {
  template,
  setup() {
    const postId = computed(() =>
      document.getElementById("Article").getAttribute("post-id")
    );
    const supportDesc = ref(
      "如果觉得我的文章对您有用，请随意打赏。您的支持将鼓励我继续创作！"
    );
    const alipayQrcode = ref("");
    const weixinQrcode = ref("");
    const supportType = ref(1);
    const showBox = ref(false);
    getSupportMeta(postId.value).then((res) => {
      const { support_desc, alipay_qrcode, weixin_qrcode } = res;
      supportDesc.value = support_desc;
      alipayQrcode.value = alipay_qrcode;
      weixinQrcode.value = weixin_qrcode;
    });

    const reward = () => {
      showBox.value = false;
      const WAY = prompt("您打赏的方式是（微信/支付宝）:", "微信");
      let RMB;
      if (WAY) {
        RMB = prompt("您打赏的金额是（元）:", "1");
      }
      if (RMB) {
        const $comment = document.getElementById("comment");
        $comment.focus();
        $comment.value =
          document.getElementById("comment").value +
          "此文很赞，我用" +
          WAY +
          "打赏了您" +
          RMB +
          "元，请注意查收！";
        window.location.href = "#comments";
      }
    };
    return {
      supportDesc,
      alipayQrcode,
      weixinQrcode,
      supportType,
      showBox,
      reward,
    };
  },
};
